<template>
    <div class="safety">
      <div class="header-warpper" @click="$router.back(-1)">
         <img src="../../assets/l_jt.png" alt="">
         <span>修改交易密码</span>
      </div>
      <div class="m-label">旧交易密码<span>（新用户旧交易密码为登陆密码）</span></div>
      <div class="m-input-box">
         <input class="m-input" type="password" value="" placeholder="请输入旧交易密码" v-model="old_pass">
      </div>
      <div class="m-label">新交易密码</div>
      <div class="m-input-box">
         <input class="m-input" type="password" value="" placeholder="请输入新交易密码" v-model="new_pass">
      </div>
      <div class="m-label">确认新交易密码</div>
      <div class="m-input-box">
         <input class="m-input" type="password" value="" placeholder="请再次输入新交易密码" v-model="con_pass">
      </div>
      <div class="m-label">短信验证码</div>
      <div class="m-input-box">
         <input class="m-input" placeholder="请输入验证码" type="text" value="" v-model="code">
         <span @click="newcode" v-show="show">获取验证码</span>
         <span v-show="!show">{{count}} s</span>
      </div>
      <input type="hidden" v-model="mobile" value="">
      <div class="red_btn" @click="send">提交</div>
      <div style="height:1.333333rem"></div>
      <Tabbar :idx="5"/>
    </div>

</template>

<script>
// @ is an alias to /src
import Tabbar from '@/views/public/Tabbar.vue'

export default {
  name: 't_password',
  components: {
    Tabbar
  },
   data() {
    return {
       mobile:'',
       old_pass:'',
       new_pass:'',
       con_pass:'',
       code:'',
       count:'',
       timer:null,
       show:true,
    }
  },
  created:function(){
    this.getinfo();
  },
  mounted () {

  },
  methods: {

    getinfo (){

      this.$axios.post("/index/usercenter/index",{})
      .then(res => {
          console.log(res)
          if(res.data.code == 0){

              if(res.data.info.mobile !== ''){
                this.mobile = res.data.info.mobile;
              }
          }else{
              alert(res.data.message);
          }

      })


    },
    newcode (event){

      let self = this;

      this.toast1 = this.$createToast({
        txt: '请输入新手机号',
        type: 'txt'
      });

      if(!this.mobile){
        return this.toast1.show();
      }

      this.$axios.post("/index/otcexchange/sendcode",{mobile:this.mobile})
      .then(res => {
          console.log(res)
          if(res.data.code == 0){

            const TIME_COUNT1 = 60;

             if (!this.timer) {

               this.count = TIME_COUNT1;

               this.show = false;

               this.timer = setInterval(() => {

               if (this.count > 0 && this.count <= TIME_COUNT1) {

                 this.count--;

                } else {

                 this.show = true;

                 clearInterval(this.timer);

                 this.timer = null;

                }

               }, 1000)

              }

            alert('发送成功,请留意短信');

          }else{

              alert(res.data.message);
              return;
          }

      })

    },
    send (event){

      let self = this;

      this.toast = this.$createToast({
        txt: '请输入旧密码',
        type: 'txt'
      });

      this.toast1 = this.$createToast({
        txt: '请输入新密码',
        type: 'txt'
      });

      this.toast2 = this.$createToast({
        txt: '请输入确认密码',
        type: 'txt'
      });

      this.toast3 = this.$createToast({
        txt: '请输入验证码',
        type: 'txt'
      });

      this.toast4 = this.$createToast({
        txt: '2次密码不一致',
        type: 'txt'
      });

      this.toast5 = this.$createToast({
        txt: '新密码未改变',
        type: 'txt'
      });

      if(!this.old_pass){
        return this.toast.show();
      }

      if(!this.new_pass){
        return this.toast1.show();
      }

      if(!this.con_pass){
        return this.toast2.show();
      }

      if(!this.code){
        return this.toast3.show();
      }

      if(this.new_pass != this.con_pass){
        return this.toast4.show();
      }
      console.log(this.new_pass)
      console.log(this.old_pass)

      if(this.new_pass == this.old_pass){
        return this.toast5.show();
      }

      this.$axios.post("/index/apiindex/tradpassword",
      {old_pwd:this.old_pass,new_pwd:this.new_pass,confirm_pwd:this.con_pass,code:this.code,mobile:this.mobile})
      .then(res => {
        console.log(res)
        if(res.data.code==0){

          alert(res.data.msg);

          setTimeout(() => {
                this.$router.push('/index');
          }, 1000);
        }else{

          alert(res.data.msg);
        }
      })
      .catch(function (error) {
        console.log(error);
      });


    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .f-flex{
        display: flex;
        display: -webkit-flex;
        align-items: center;
    }
    .red_btn{
        width: 92%;
        margin: auto;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
    .safety{
        .m-label{
            padding-left: 4%;
            span{
                 color: red;
                  font-size: 0.34rem;
                  margin-left: .2rem;
            }
        }
        .m-input-box{
            padding-right: 0;
            margin-left: 4%;
                span{
                    width: 35%;
                    color: #e56337;
                    font-size: .373333rem;
                    margin-top: .58rem;
                    margin-right: 4%;
                    }
        }
        .m-input{
            color: #000;
            font-size: .426667rem;
            font-weight: bold;
        }
        .xga{
            padding-right: 4%;
            width: 30%;
            .f-flex();
            margin-top: .8rem;
            font-size: .373333rem;
            span{
                padding-right: .2rem;
                color: #aab2ca;
            }
            img{
                margin-top: 0;
            }
        }
    }
</style>

